<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>书籍分类</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/jsp/css/main.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/jsp/css/materialize.css">
    <script type="text/javascript" src="${ctx}/jsp/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/jsp/js/xiaoguo.js"></script> 
    <script type="text/javascript" src="${ctx}/jsp/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${ctx}/jsp/js/materialize.js"></script>
    </head>
    <body>
        <div class="header">
            <div class="header-name">
                <p style="margin-bottom: 0px;margin-top: 0px;">鱼巷猫未归</p>
            </div>
            <div class="header-text">
                <ul class="text11">
                    <li><a href="${ctx}/bookAction_toIndex" style="color:#ea6f5a;font-size:18px;">首页</a></li>
                    <li></li>
                </ul>
            </div>          
            <div class="header-right" style="float: left;margin-left: 560px;width:400px;">
                <a href="#" class="dengluaa">${user.nickName}</a>
                <a href="${ctx}/userAction_logout" class="dengluaa" style="margin-left:20px;">退出</a>
                <a href="${ctx}/jsp/user_edit.jsp" class="right-zhuce">修改信息</a>
                <a href="${ctx}/jsp/book_add.jsp" class="right-shangjia">上架书籍</a>
            </div>
        </div>
        <label class="tjsjxx">书籍分类</label>
        <div class="typeleft">
            <div class="type" style="width:300px;float：left;">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                         <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                    </div>
                    <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">${list[0].labelName}<i class="material-icons right">详情</i></span>
                        <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[0].id}&Page=1">点击查看</a></p>
                     </div>
                     <div class="card-reveal">
                        <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                        <p>单击后显示的产品的详细信息。</p>
                    </div>
            </div>
        </div>
        
            
            <div class="type1" style="width:300px;float：left;">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                         <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4">${list[1].labelName}<i class="material-icons right">详情</i></span>
                        <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[1].id}&Page=1">点击查看</a></p>
                     </div>
                     <div class="card-reveal">
                         <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                         <p>单击后显示的产品的详细信息。</p>
                    </div>
                </div>
            </div>
            
            <div class="type1" style="width:300px;float：left;">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                         <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                    </div>
                    <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">${list[2].labelName}<i class="material-icons right">详情</i></span>
                        <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[2].id}&Page=1">点击查看</a></p>
                     </div>
                     <div class="card-reveal">
                        <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                        <p>单击后显示的产品的详细信息。</p>
                    </div>
                </div>
            </div>
        
            <div class="type1" style="width:300px;float：left;">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                        <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                    </div>
                    <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4">${list[3].labelName}<i class="material-icons right">详情</i></span>
                        <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[3].id}&Page=1">点击查看</a></p>
                    </div>
                    <div class="card-reveal">
                        <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                        <p>单击后显示的产品的详细信息。</p>
                    </div>
                </div>
            </div>
    </div>
    
    
    <div class="typemiddle">
        <div class="type" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[4].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[4].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
        
        <div class="type1" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[5].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[5].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
            
         <div class="type1" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[6].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[6].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
        
        <div class="type1" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[7].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[7].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="typeright">
        <div class="type" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[8].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[8].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
        
        <div class="type1" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[9].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[9].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
            
         <div class="type1" style="width:300px;float：left;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                     <img class="activator" src="${ctx}/jsp/img/LF2.jpg">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">${list[10].labelName}<i class="material-icons right">详情</i></span>
                    <p><a href="${ctx}/bookAction_listByLabel?labelId=${list[10].id}&Page=1">点击查看</a></p>
                 </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
                     <p>单击后显示的产品的详细信息。</p>
                </div>
            </div>
        </div>
    </div>
    <style>
        .tjsjxx{
                    border:1px solid rgb(236 97 73);
                    width:260px;
                    height:50px;
                    margin:0 auto;
                    text-align: center;
                    line-height: 50px;
                    color:rgb(236 97 73);
                    background-color: #fff;
                    border-radius: 20px;
                    position: absolute;
                    font-size: 20px;
                    left:548px;
                    top:100px;
                }
    </style>
    </body>
</html>
